<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="title u-padding-left-20">交易总额：{{totalAmount}}元</view>

		<view class="content u-margin-20 u-padding-20">
			<view class="u-border-bottom u-padding-bottom-20 flex justify-between">
				<view class="">
					{{monthData.month}}
				</view>
				<view class="">

					<view class="">
						合计：<text class="color">￥{{monthTransAmount}}</text>
					</view>
					<view class="">
						共交易 <text class="color"> {{monthData.monthTransCount}}</text> 笔
					</view>
				</view>
			</view>
			<view class="u-padding-10" v-for="(item,index) in data.monthCensusInfo" :key="index">
				{{item.month}} {{item.monthTransAmount}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 声明你需要的属性
			merchantNo: String
		},
		data() {
			return {

				data: {},
				monthData: {}
			}
		},
		computed: {
			totalAmount() {
				if (this.data && this.data.totalTransAmount) {
					return this.$commonJs.money.formatMoney(
						this.$commonJs.money.toFixed(this.data.totalTransAmount, 2))
				}
			},
			monthTransAmount() {
				return this.$commonJs.money.formatMoney(
					this.$commonJs.money.toFixed(this.monthData.monthTransAmount, 2))
			}
		},
		mounted() {

			this.queryMerTrans();
		},
		methods: {


			queryMerTrans() {
				const _that = this;
				_that.$zx.order_api.queryMerTrans(_that.merchantNo).then((data) => {

					data.monthCensusInfo.forEach(function(item, index, array) {
						_that.monthData = item;
					});

					_that.data = data;
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.title {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #e3eef6;
		color: #9D60FF;
	}

	.content {
		background-color: white;
		border-radius: 20rpx;
	}

	.color {
		color: #9D60FF;
	}
</style>